<template>
  <el-row>
    <el-col :span="8" class="sea-card">
      <el-card shadow="hover" body-style="height:100%">
        <el-button size="small" type="primary" style="width: 100%">Compose</el-button>
        <div class="text-box with-border">
          <strong><i class="fa fa-inbox"></i> Inbox：</strong>
          <span class="badge bg-orange pull-right">1</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-envelope-o"></i> Sent：</strong>
          <span class="badge bg-orange pull-right">4</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-file-text-o"></i> Drafts：</strong>
          <span class="badge bg-gray pull-right">32</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-filter"></i> Junk：</strong>
          <span class="badge bg-gray pull-right">1</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-trash-o"></i> Trash：</strong>
          <span class="badge bg-gray pull-right">2</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16" class="sea-card">
      <el-card shadow="hover">
        <sea-table-title slot="header" title="Compose New Message">
        </sea-table-title>
        <div class="box no-border">
          <div class="box-body no-padding">
            <div class="box-item">
              <el-input size="small" placeholder="To:"></el-input>
            </div>
            <div class="box-item">
              <el-input size="small" placeholder="Subject:"></el-input>
            </div>
            <div class="box-item">
              <el-input type="textarea" placeholder="Content:" :rows="12"></el-input>
            </div>
            <div class="box-item">
              <el-button icon="fa fa-paperclip">Attachment</el-button>
              <p>Max. 32MB</p>
            </div>
          </div>
          <div class="box-footer">
            <div class="pull-left">
              <el-button icon="fa fa-times">Discard</el-button>
            </div>
            <div class="pull-right">
              <el-button icon="fa fa-pencil">Draft</el-button>
              <el-button icon="fa fa-envelope-o" type="primary">Send</el-button>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>

      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
    name: "compose",
    data() {
        return {}
    }
}
</script>

<style scoped>
</style>
